<script setup>
import { ref, reactive, onMounted } from 'vue';
import axios from 'axios'
import logo from '../assets/list/logo.png'
import article from '../assets/list/article.png'
import user from '../assets/list/user.png'
const listTitle = ref([
    {
        title: '文章管理',
        img: logo
    },
    {
        title: '文章列表',
        img: article
    },
    {
        title: '个人中心',
        img: user
    }
])

//———————————————————————getList—————————————————————————//
const tableData = ref([
])
const getList = async () => {
    const token = localStorage.getItem('token')
    // console.log(token);
    try {
        const result = await axios.get('http://localhost:8080/news/show', {
            headers: {
                'Authorization': `Bearer ${token}`
            }
        });
        // console.log(result.data.data);
        tableData.value = result.data.data;
    } catch (err) {
        console.error('获取失败:', err);
    }
};
onMounted(() => {
    getList();
})



//———————————————————————add—————————————————————————//
const dialogFormVisible = ref(false)
const form = reactive({
    name: '',
    tag: ''
})
const addNews = async () => {
    const token = localStorage.getItem('token')
    try {
        const result = await axios.post(
            'http://localhost:8080/news/add',
            form,
            {
                headers: {
                    'Content-Type': 'application/json',
                    'Authorization': `Bearer ${token}`
                },
            }

        );
        console.log(result.data);
        getList()
    } catch (err) {
        console.error('添加失败:', err);
    }
};
//delete
const deleteNews = async (id) => {
    const token = localStorage.getItem('token')
    console.log(id);
    const result = await axios.delete(
        `http://localhost:8080/news/delete/${id}`,
        {
            headers: {
                'Content-Type': 'application/json',
                'Authorization': `Bearer ${token}`
            },
        }

    );
    getList()
}
//edit
const dialog = ref(false)
const update =()=>{
    dialog.value = true
}
const editNews = async (id) => {
    const token = localStorage.getItem('token')
    console.log(id);

    const result = await axios.put(
        `http://localhost:8080/news/edit/${id}`,
        form,
        {
            headers: {
                'Content-Type': 'application/json',
                'Authorization': `Bearer ${token}`
            },
        }

    );
    console.log(form);
    getList()
}
// search
const input = ref('')
const search = async () => {
    const token = localStorage.getItem('token')
    const result = await axios.get(
        `http://localhost:8080/news/search/${input.value}`,
        {
            headers: {
                'Content-Type': 'application/json',
                'Authorization': `Bearer ${token}`
            },
        }
        
    );
    tableData.value = result.data.data;
    input.value = ''
}
const reset = () => {
    getList()
}
</script>

<template>
    <div class="app">
        <div class="list">
            <div class="logo">
                新闻管理
            </div>
            <div class="title">
                <!-- v-for的使用 -->
                <div class="lists" v-for="item in listTitle" :key="item.title">
                    <img :src="item.img" style="width: 30px;height: 30px;">
                    <div class="text">{{ item.title }}</div>
                </div>
            </div>
        </div>
        <div class="content">
            <div class="title">
                <span>best</span>
                <img src="../assets/list/defaultAvatar​.png" style="width: 30px;height: 30px;margin-left: 10px;">
            </div>
            <div class="contents">
                <div class="mTitle">
                    <span style="flex: 1;margin-left: 10px;">文章管理</span>
                    <el-button type="primary" style="margin-right: 10px;" plain
                        @click="dialogFormVisible = true">发布文章</el-button>
                    <el-dialog v-model="dialogFormVisible" title="新增文章" width="500">
                        <el-form :model="form">
                            <el-form-item label="分类" :label-width="140">
                                <el-input v-model="form.name" autocomplete="off" />
                            </el-form-item>
                            <el-form-item label="标题" :label-width="140">
                                <el-input v-model="form.tag" placeholder="请输入文章标题">
                                </el-input>
                            </el-form-item>
                        </el-form>
                        <template #footer>
                            <div class="dialog-footer">
                                <el-button @click="dialogFormVisible = false">取消</el-button>
                                <el-button type="primary" @click="dialogFormVisible = false; addNews()">
                                    提交
                                </el-button>
                            </div>
                        </template>
                    </el-dialog>

                </div>
                <div class="article">
                    <div class="articleTitle">
                        <el-input v-model="input" style="width: 240px;" placeholder="请输入文章标题" />
                        <el-button type="primary" style="margin-left: 10px;" @click="search">搜索</el-button>
                        <el-button type="primary" style="margin-left: 10px;" @click="reset">重置</el-button>
                    </div>
                    <div class="articleList">
                        <el-table :data="tableData" stripe style="width: 900px">
                            <el-table-column prop="name" label="文章标题" width="180" show-overflow-tooltip />
                            <el-table-column prop="tag" label="分类" width="180" />
                            <el-table-column prop="createTime" label="发表时间" />
                            <el-table-column fixed="right" label="操作" min-width="120">
                                <template #default="{ row }">
                                    <el-button link type="primary" size="small" @click="deleteNews(row.id)">
                                        删除
                                    </el-button>
                                    <el-button link type="primary" size="small"
                                        v-model="dialog" @click="update">修改</el-button>

                                    <el-dialog v-model="dialog" title="修改文章" width="500">
                                        <el-form :model="form">
                                            <el-form-item label="分类" :label-width="140">
                                                <el-input v-model="form.name" autocomplete="off" />
                                            </el-form-item>
                                            <el-form-item label="标题" :label-width="140">
                                                <el-input v-model="form.tag" placeholder="请输入文章标题">
                                                </el-input>
                                            </el-form-item>
                                        </el-form>
                                        <template #footer>
                                            <div class="dialog-footer">
                                                <el-button @click="dialog = false">取消</el-button>
                                                <el-button type="primary" @click="dialog = false;editNews(row.id)">
                                                    提交
                                                </el-button>
                                            </div>
                                        </template>
                                    </el-dialog>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped>
.app {
    width: 100%;
    max-height: 100vh;
    display: flex;
    flex-direction: row;
}

.list {
    width: 20%;
    height: 100vh;
    background-color: #232323;
}

.list .logo {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 32px;
    height: 60px;
    width: 100%;
}

.list .title {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 20px;
    color: #ffffff;
}

.title .lists {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    width: 100%;
    height: 40px;
}

.list .title .text {
    align-self: center;
    margin-left: 10px;
}

.content {
    width: 80%;
    height: 100vh;
    float: left;
    background-color: #f4f4f4;
}

.content .title {
    width: 100%;
    height: 60px;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    border-bottom: 1px solid #e4e4e4;
}

.content .contents {
    width: 100%;
    height: 100%;
    background-color: #ffffff;
}

.contents .mTitle {
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #e4e4e4;
}

.articleTitle {
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-left: 10px;
}

.articleList {
    width: 100%;
    height: 100%;
    margin: 10px;
}
</style>